<template>
  <div class="all1">
    <div class="title">{{prop_title}}</div>
    <van-uploader  multiple :deletable="deletable" :disabled="disabled" v-model="files1" :upload-text="text"
    :before-read="afterRead"  >

    </van-uploader>
  </div>
</template>

<script>
  import {
    SystemService
  } from '@/api'
  export default {
    name: 'uploader',
    model: {
      prop: 'file',
      event: 'hasUpload'
    },
    props: {
      prop_title: String,
      deletable: {
        type: Boolean,
        default: true
      },
      text: {
        type: String,
        default: ''
      },
      file: {
        type: String,
        default: ''
      },
      disabled:{
        type: Boolean,
        default: false,
      }
    },
    data() {
      return {
        files1: []
      }
    },
    watch: {
      file: {
        handler(newValue) {
          if (newValue) {
            this.files1 = newValue.split(',').reduce( (result, item) => {
              result.push({
                url: item
              })
              return result;
            }, [])
          }
        },
        immediate: true,
        deep: true,
      }
    },
    methods: {
      afterRead(file) {
        console.log('down', this.files1);
        console.log(file)

        var data = new FormData();
        data.append("image[]", file);
        SystemService.upload(data).then(res => {
          // console.log('up', this.files1);
          // this.files1.pop();
          // console.log(res)
          // this.files1[0].url = res.data[0];
          
          // console.log('forns: ' + this.files1[0].url)
          // console.log('after: ' + res.data)
          this.files1.push({url:res.data[0]})
          let value = this.files1.reduce((result,item,index)=>{
              if(index == 0){
                return item.url
              }else{
                return result + ',' + item.url;

              }
          },'')
          this.$emit('hasUpload', value)
        })
      }
    },
  }
</script>

<style lang="less" scoped>
  .all1 {
    // padding-left: 32px;
    // padding-top: 20px;
    padding-left: 14px;
    padding-top: 24px;
    

    .title {
      font-size: 28px;
      margin-bottom : 15px;
    }
  }
</style>